<template>
  <div class="assets-container">
    <!-- 顶部导航 -->
    <ResponsiveNav />

    <!-- 顶部占位空间 -->
    <div class="header-placeholder"></div>

    <div class="assets-page">
      <!-- 添加条件显示的面包屑导航 -->
      <div v-if="fromAccount" class="page-nav">
        <div class="breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item @click="handleBack">
              <i class="fas fa-chevron-left"></i> {{ $t('返回账户') }}
            </el-breadcrumb-item>
            <el-breadcrumb-item>{{ $t('我的资产') }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="divider"></div>
      </div>

      <!-- 页面标题 -->
      <div class="page-header">
        <h1>{{ $t('我的资产') }}</h1>
      </div>

      <!-- 资产概览卡片 -->
      <div class="overview-card">
        <div class="balance-section">
          <div class="title">{{ $t('账户余额') }}</div>
          <div class="amount">
            <span class="currency">{{ langStore.languageSymbol }}</span>
            <span class="value">{{ formatPrice(totalBalance*langStore.languageRate) }}</span>
          </div>
          <div class="action-buttons">
            <el-button class="amazon-button primary" @click="goToRecharge">
              {{ $t('立即充值') }}
            </el-button>
            <el-button class="amazon-button secondary" @click="handleWithdraw">
              {{ $t('立即提款') }}
            </el-button>
          </div>
        </div>
        <!--        <div class="stats-grid">-->
        <!--          <div class="stat-item">-->
        <!--            <div class="label">可用余额</div>-->
        <!--            <div class="value">¥{{ formatPrice(availableBalance) }}</div>-->
        <!--          </div>-->
        <!--          <div class="stat-item">-->
        <!--            <div class="label">冻结金额</div>-->
        <!--            <div class="value">¥{{ formatPrice(frozenBalance) }}</div>-->
        <!--          </div>-->
        <!--          <div class="stat-item">-->
        <!--            <div class="label">累计收益</div>-->
        <!--            <div class="value profit">+¥{{ formatPrice(totalProfit) }}</div>-->
        <!--          </div>-->
        <!--        </div>-->
      </div>

      <!-- 使用交易记录组件 -->
      <TransactionList />
    </div>

    <!-- 页尾 -->
    <Footer />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import ResponsiveNav from '@/components/ResponsiveNav.vue'
import Footer from '@/components/Footer.vue'
import { useRouter, useRoute } from 'vue-router'
import TransactionList from './components/TransactionList/index.vue'
import useUserStore from '@/store/modules/user'
import {useI18n} from "vue-i18n";
const { t } = useI18n();
import useLangStore from '@/store/modules/lang'
const langStore = useLangStore()

const userStore = useUserStore()
// 资产数据
const totalBalance = ref(userStore?.wallet?.memberWallet || 0)
const availableBalance = ref(0);
const frozenBalance = ref(0);
const totalProfit = ref(0);

//获取个人信息
const getInfouser = async () => {
  const getInfouserStore = await userStore.getInfo();
  totalBalance.value = getInfouserStore.data?.wallet?.memberWallet || 0;
  availableBalance.value = getInfouserStore.data?.wallet?.memberWallet || 0;
}
const formatPrice = (price) => {
  // 转为数字后再调用 toFixed
  if (!isNaN(price)) {
    price = Number(price);
    return price.toFixed(2)
  } else {
    return 0
  }
}

const router = useRouter()
const route = useRoute()

// 判断是否从账户页面进入
const fromAccount = ref(route.query.from === 'account')

// 返回处理
const handleBack = () => {
  router.push('/account')
}

const goToRecharge = () => {
  // router.push('/assets/recharge')
  router.push('/assets/recharge-select')
  
}

const handleWithdraw = () => {
  if (availableBalance.value <= 0) {
    ElMessage.warning(t('可用余额不足'))
    return
  }
  router.push('/assets/withdraw-select')
  // router.push('/assets/withdraw')
}
onMounted(() => {
  getInfouser();
})
</script>

<style lang="scss" scoped>
@use '@/styles/variables' as *;

.assets-container {
  background-color: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header-placeholder {
  height: 0; // 移除固定高度
}

.assets-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
  padding-top: 10px; // 添加顶部内边距

  @media #{$media-mobile} {
    padding: 0;
    padding-top: 10px; // 移动端也保持顶部间距
  }
}

.page-header {
  margin-bottom: 20px;

  @media (max-width: 768px) {
    padding: 16px 16px 0; // 只保留左右和上部的内边距
    margin-bottom: 12px;
  }

  h1 {
    font-size: 28px;
    color: #111;
    font-weight: 400;

    @media (max-width: 768px) {
      font-size: 20px;
      margin: 8px 0; // 添加上下间距
    }
  }
}

.overview-card {
  background: white;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

  @media (max-width: 768px) {
    border-radius: 0;
    margin-bottom: 12px;
    padding: 16px;
    box-shadow: none;
    border-bottom: 1px solid #eee;
  }

  .balance-section {
    margin-bottom: 24px;

    @media (max-width: 768px) {
      margin-bottom: 16px;
      text-align: center;
    }

    .title {
      font-size: 16px;
      color: #555;
      margin-bottom: 10px;
    }

    .amount {
      margin-bottom: 20px;

      .currency {
        font-size: 24px;
        color: #111;

        @media (max-width: 768px) {
          font-size: 20px;
        }
      }

      .value {
        font-size: 36px;
        font-weight: 500;
        color: #111;

        @media (max-width: 768px) {
          font-size: 28px;
        }
      }
    }

    .action-buttons {
      display: flex;
      gap: 16px;
      margin-top: 24px;
      justify-content: center;

      @media (max-width: 768px) {
        gap: 8px;
        margin-top: 16px;
        justify-content: center;
      }
    }
  }

  .stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;

    @media (max-width: 768px) {
      gap: 12px;
    }

    .stat-item {
      text-align: center;
      padding: 15px;
      background: #fafafa;
      border-radius: 6px;
      border: 1px solid #eee;

      @media #{$media-desktop} {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        padding: 20px;
      }

      .label {
        font-size: 14px;
        color: #666;
        margin-bottom: 4px;

        @media #{$media-desktop} {
          margin-bottom: 0;
        }
      }

      .value {
        font-size: 20px;
        font-weight: 500;
        color: #111;

        &.profit {
          color: #067d62;
        }
      }
    }
  }
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

:deep(.amazon-button) {
  &.primary {
    background: linear-gradient(to bottom, #f7dfa5, #f0c14b);
    border-color: #a88734 #9c7e31 #846a29;
    color: #111;

    &:hover {
      background: linear-gradient(to bottom, #f5d78e, #eeb933);
    }
  }

  &.secondary {
    background: linear-gradient(to bottom, #f7f8fa, #e7e9ec);
    border-color: #adb1b8 #a2a6ac #8d9096;
    color: #111;

    &:hover {
      background: linear-gradient(to bottom, #e7e9ec, #d9dce1);
    }
  }
}

:deep(.amazon-select),
:deep(.amazon-date-picker) {
  width: 100%;

  .el-input__wrapper {
    background-color: #fff;
    border-color: #a6a6a6;
    border-radius: 3px;
    box-shadow: none;

    &:hover {
      border-color: #a2a6ac #979aa1 #82858a;
    }

    &.is-focus {
      border-color: #e77600;
      box-shadow: 0 0 3px 2px rgb(228 121 17 / 50%);
    }
  }
}

:deep(.amazon-table) {
  border: 1px solid #eee;
  border-radius: 4px;

  .el-table__header {
    th {
      background-color: #f8f8f8;
      color: #111;
      font-weight: 500;
    }
  }
}

:deep(.amazon-pagination) {
  .el-pagination__total {
    color: #565959;
  }

  .el-pager li {
    &:not(.is-disabled).is-active {
      background-color: #f0c14b;
      border-color: #a88734;
    }
  }
}

.recharge-form {
  .amount-input {
    position: relative;
    margin-bottom: 20px;

    .currency-symbol {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #666;
      font-size: 16px;
    }

    :deep(.el-input__inner) {
      padding-left: 30px;
      font-size: 16px;
    }
  }

  .quick-amounts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;

    .el-button {
      &.active {
        background: #e6f7ff;
        border-color: #1890ff;
        color: #1890ff;
      }
    }
  }
}

:deep(.el-empty) {
  padding: 60px 0;

  .empty-icon {
    font-size: 80px;
    color: #ccc;
    margin-bottom: 20px;
  }

  .empty-text {
    margin-top: 20px;
    color: #666;
    font-size: 14px;
  }
}

.page-nav {
  margin-bottom: 20px;
  padding: 0 20px;
  margin-top: 10px; // 添加顶部间距

  .breadcrumb {
    margin-bottom: 16px;

    :deep(.el-breadcrumb__item) {
      .el-breadcrumb__inner {
        color: #666;
        font-weight: normal;
        cursor: pointer;

        &:hover {
          color: #1890ff;
        }

        i {
          margin-right: 4px;
        }
      }
    }
  }

  .divider {
    height: 1px;
    background: #e8e8e8;
    margin: 0;
  }
}
</style>
